<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="description" content="我叫胡琦，今年24岁，是一名前端工程师,对大前端和编程技术非常热爱，目前已掌握HTML5、CSS3、jQuery、BootStrap、移动Web开发、基于ionic、React Native的移动App开发等前端必备技术，有信心胜任前端工程师的职位，对我有意的公司和HR可以QQ联系我或者给我发邮件，谢谢！">
    <meta name="keywords" content="个人简历，前端工程师，移动开发，发烧哥，fashaoge">
    <title>前端小白，为掌握大牛核心技术而奋斗！</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>
<body id="page-top"  data-spy="scroll" data-target=".navbar-fixed-top">
    <!--nav-->
    <nav class="navbar navbar-custom navbar-fixed-top navbar-top"   role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;"><i class="icon iconfont">&#xe604;</i>发烧哥</a>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right" id="navbar-main-collapse">
                <ul class="nav navbar-nav ">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden active">
                        <a class="page-scroll" href="javascript:;"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#hesume">基本资料</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#skills">专业技能</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#teams">成长经历</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#projects">项目经验</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#testimonials">自我评价</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">联系方式</a>
                    </li>

                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--header banner-->


    <script ></script>
    <header class="banner">
        <div class="banner-body">
            <div class="container-fluid">
                <div class="row">
                        <div class="col-md-6 col-md-offset-3 banner-content">
                        <h1>逆<span>袭</span></h1>
                        <p class="banner-text">掌握大前端核心技术<br/>迎娶白富美走向巅峰</p>
                        <a href="#hesume" class="btn btn-circle page-scroll">
                            <i class=" icon iconfont animated">&#xe607;</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Hesume Section-->
    <div id="hesume" class="text-center">
        <div class="container-fluid">
            <div class="section-title center">
                <h2>基本<strong>资料</strong></h2>
                <hr/>
            </div>
            <div class="row mt20 pb40">
                <div class="col-md-3 col-sm-6 info">
                    <i class=" icon iconfont animated">&#xe60d;</i>
                    <h4><strong>个人信息</strong></h4>
                    <p>
                        姓名: 胡琦 &nbsp;性别：男<br>
                        年龄: 24岁 籍贯：湖南
                    </p>
                </div>
                <div class="col-md-3 col-sm-6 info"> <i class=" icon iconfont animated">&#xe606;</i>
                    <h4><strong>专业学历</strong></h4>
                    <p>
                        专业：环境工程<br>
                        学历：大学本科<br>
                    </p>
                </div>
                <div class="col-md-3 col-sm-6 info"><i class=" icon iconfont animated">&#xe603;</i>
                    <h4><strong>毕业学校</strong></h4>
                    <p>
                        毕业学校：湖南城市学院<br>
                        自学技能：HTML+CSS+JavaScript
                    </p>
                </div>
                <div class="col-md-3 col-sm-6 info"><i class=" icon iconfont animated">&#xe617;</i>
                    <h4><strong>联系方式</strong></h4>
                    <p>QQ：820965339<br>
                        邮箱：huqi1024@gmail.com</p>
                </div>

            </div>
        </div>
        <a href="#skills" class="btn btn-circle page-scroll" onclick="">
            <i class=" icon iconfont animated">&#xe607;</i>
        </a>
    </div>

    <!-- Skills-->
    <div id="skills" class="text-center">
        <div class="container">
            <div class="section-title text-center center">
                <h2><strong>专业</strong> 技能</h2>
                <hr>
            </div>
            <div class="row">
                <div class="col-md-6 info"><div class="aboutimg"> <img src="img/about%20-%20副本.png" class=""><div class="img1"></div>
                    <div class="img2 img-responsive"></div>
                    <div class="img3 img-responsive"></div>
                    <div class="img4 img-responsive"></div>
                    <div class="img5 img-responsive"></div>
                    <div class="img6 img-responsive"></div></div>

                </div>
                <div class="col-md-6 info ">
                    <div class="about-text">
                        <div class="padding-left"><h4><i class=" icon iconfont animated">&#xe605;</i> PC端</h4>
                            <p>熟练使用HTML/CSS技术，熟悉Javascript/jquery编程,了解angularjs，reactjs等前端框架进行模块开发，了解Ajax、Nodejs进行前后台数据交互，了解less，sass，VUE.js等前端新技术</p>
                        </div>

                        <div class="padding-left"><h4><i class=" icon iconfont animated">&#xe605;</i> 移动端</h4>
                            <p>能使用zepto.js，HTML5+，Ionic，ReactNative等进行移动页面的开发，了解canvas画布开发炫酷页面.</p>
                        </div>

                        <div class="padding-left"><h4><i class=" icon iconfont animated">&#xe60e;</i> 其它</h4>
                            <p>了解网站性能优化，网站百度排名和SEO优化，熟练使用Firework等切图工具，会常见的UI技巧，了解php、python等后台语言开发.</p>
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
         <a href="#teams" class="btn btn-circle page-scroll ">
                    <i class=" icon iconfont animated">&#xe607;</i>
                </a>
    </div>

    <!-- Teams-->
    <div id="teams" class="text-center">
        <div class="container">
            <div class="section-title center">
                <h2>成长<strong>经历</strong></h2>
                <hr>
                <p>热爱互联网，热爱技术，专注于前端与移动开发和用户体验</p>
            </div>
            <div id="row">
                <div class="col-md-3 col-sm-6">
                    <div class="thumbnail"> <img src="img/team/01.jpg" alt="湖南城市学院" class="img-circle team-img">
                        <div class="caption">
                            <h3>湖南城市学院</h3>
                            <p>环境工程</p>
                            <p>课外时间自主学习前端开发技术，了解网站制作和开发。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="thumbnail"> <img src="img/team/02.jpg" alt="恒大集团" class="img-circle team-img">
                        <div class="caption">
                            <h3>恒大集团</h3>
                            <p>销售储备干部</p>
                            <p> 工作时间：2014.5-2015.2<br>负责品牌推广，促销管理以及市场调研分析报告；业余时间学习HTML+CSS。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="thumbnail"> <img src="img/team/03.jpg" alt="搜空" class="img-circle team-img">
                        <div class="caption">
                            <h3>搜空高科</h3>
                            <p>前端工程师</p>
                            <p>工作时间：2015.3-2016.7<br>主要负责还原设计稿、搭建页面结构、按要求实现页面交互效果、优化用户体验。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                     <div class="thumbnail"> <img src="img/team/04.jpg" alt="传智播客" class="img-circle team-img">
                                <div class="caption">
                                <h3>未来。。。</h3>
                            <p>期望职位：前端工程师</p>
                            <p>能快速适应新的环境、融入新的团队，能按照项目开发需求完成必需的前端开发工作，能快速学习快速成长，为公司创造最大的利益。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#projects" class="btn btn-circle page-scroll " >
            <i class=" icon iconfont animated">&#xe607;</i>
        </a>
    </div>

    <!--Projects-->
    <div id="projects">
        <div class="container-fluid"> <!-- Container -->
            <div class="section-title text-center center">
                <h2>项目 <strong>经验</strong></h2>
                <hr>
                <div class="clearfix"></div>
                <p>在益阳搜空高科软件，主要接触的项目有土刻猫和自驾友，包括PC端，手机端，主要技术是HTML+CSS+JavaScript+JQuery+AJAX</p>
            </div>
            <div class="categories">
                <ul class="cat">
                    <li>
                        <ol class="type">
                            <li><a href="#" data-filter="*" class="active">所有</a></li>
                            <li><a href="#" data-filter=".web">PC端</a></li>
                            <li><a href="#" data-filter=".app">移动端</a></li>
                            <li><a href="#" data-filter=".branding">响应式</a></li>
                        </ol>
                    </li>
                </ul>
                <!--<div class="clearfix"></div>-->
            </div>
           <!-- <div class="row text-center">
                <div class="portfolio-items isotope info">
                    <div class="col-sm-6 col-md-3 col-lg-3 web isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
                        <div class="portfolio-item">
                            <div class="hover-bg">
                                <div class="hover-text">
                                    <h4><a href="javascript:;" target="_blank" title="尚合手机">尚合手机</a></h4>
                                    <small>技术：html+css</small>
                                    <div class="clearfix"></div>
                                    <i class="fa icon iconfont"></i> </div>
                                <img src="img/portfolio/01.jpg" class="img-responsive" alt="尚合手机"></div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 branding app web isotope-item" style="position: absolute; left: 0px; top: 0px; ">
                        <div class="portfolio-item">
                            <div class="hover-bg">
                                <div class="hover-text">
                                    <h4><a href="javascript:;" target="_blank" title="京西正品">京西正品</a></h4>
                                    <small>技术：jQuery+Bootstrap</small>
                                    <div class="clearfix"></div>
                                    <i class="fa icon iconfont"></i> </div>
                                <img src="img/portfolio/02.jpg" class="img-responsive" alt="京西正品"></div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col-lg-3 web app isotope-item" style="position: absolute; left: 0px; top: 0px ;">
                        <div class="portfolio-item">

                            <div class="hover-bg">
                                <div class="hover-text">
                                    <h4><a href="javascript:;" target="_blank" title="梅兰商贸">梅兰商贸</a></h4>
                                    <small>技术：HTML+CSS+JavaScript</small>
                                    <div class="clearfix"></div>
                                    <i class="fa icon iconfont"></i>
                                </div>
                                <img src="img/portfolio/03.jpg" class="img-responsive" alt="梅兰商贸">
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#testimonials" class="btn btn-circle page-scroll " >
                    <i class=" icon iconfont animated">&#xe607;</i>
                </a>
            </div>-->
        </div>
    </div>

    <!--Testimonial-->
    <div id="testimonials" class="text-center container-fluid">
            <div class="section-title center"> <h2>自我 <strong>评价</strong></h2> <hr></div>
            <div id="carousel-example-generic" class="carousel slide person" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div><p>热爱学习,良好的团队合作精神，能迅速融入新的团队。<br>易和人相处，拥有良好的亲和力。</p></div>
                    </div>
                    <div class="item">
                        <div> <p>有强烈的责任感，工作踏实，性格开朗乐观，积极上进，吃苦耐劳。<br>能在较大的压力下保持良好的工作状态，善于自我调节。</p></div>
                    </div>
                    <div class="item">
                        <div> <p>非常热爱编程，喜欢钻研新的技术，喜欢接受各种不同的挑战。<br>具有很强的自学能力和良好的学习方法。</p></div>
                    </div>
                </div>
            </div>
            <a href="#contact" class="btn btn-circle page-scroll ">
                <i class=" icon iconfont animated">&#xe607;</i>
            </a>
    </div>

    <!-- Contact Section -->
    <div id="contact" class="text-center">
        <div class="container">
            <div class="section-title center">
                <h2><strong>联系</strong> 方式</h2>
                <hr>
            </div>
            <div class="col-md-8 col-md-offset-2">
                <div class="col-md-4"> <i class="fa icon iconfont fa-2x">&#xe602; </i>
                    <p>广州市天河区珠吉街道珠吉路58号</p>
                </div>
                <div class="col-md-4"> <i class="fa icon iconfont fa-2x">&#xe608;</i>
                    <p>huqi288@gmail.com</p>
                </div>
                <div class="col-md-4"> <i class="fa icon iconfont fa-2x">&#xe601;</i>
                    <p>(86)17007222225</p>
                </div>
                <hr>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-8 col-md-offset-2">
                <hr>
                <h3>给我发邮件</h3>
                <form name="sentMessage" id="contactForm" novalidate="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" id="name" class="form-control" placeholder="姓名" required="required">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="email" id="email" class="form-control" placeholder="邮箱" required="required">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea name="message" id="message" class="form-control" rows="4" placeholder="内容" required=""></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                    <div id="success"></div>
                    <button type="submit" class="btn btn-default">确认发送</button>
                </form>
            </div>
        </div>
    </div>

    <nav id="footer">
        <div class="container">
            <div class="pull-left fnav">
                <!--<p>屌丝能不能逆袭，就看能不能掌握大前端核心技术-->
                    <!--<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1259050699'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259050699%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script> <a style="color:#F4D03F" href="http://www.fashaoge.com/" target="_blank" title="前端博客">个人博客</a> </p>-->
            </div>
            <div class="pull-right fnav">
                <ul class="footer-social">
                    <div class="bshare-custom icon-medium-plus"><a title="分享到QQ空間" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人網" class="bshare-renren"></a><a title="分享到騰訊微博" class="bshare-qqmb"></a><a title="分享到網易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.com/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh_TW"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.com/b/bshareC0.js"></script>
                    <!--<li><a href="http://v.t.sina.com.cn/share/share.php?url=http://www.fashaoge.com&amp;title=#前端攻城狮#发烧哥的个人简历" target="_blank"><i class="icon iconfont"></i></a></li>-->
                    <!--<li><a href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.fashaoge.com&amp;title=#前端攻城狮#发烧哥的个人简历"> <i class="icon iconfont"></i></a></li>-->
                    <!--<li><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.fashaoge.com&amp;title=#前端攻城狮#发烧哥的个人简历"> <i class="icon iconfont"></i></a></li>-->

                    <!--<li><a href="http://share.renren.com/share/buttonshare.do?link=http://www.fashaoge.com&amp;title=#前端攻城狮#发烧哥的个人简历"><i class="icon iconfont"></i></a></li>-->
                </ul>
            </div>
        </div>
    </nav>

</body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
        /* fe */
        if(typeof(console)!='undefined'){
            console.log('\u6211\u53eb\u80e1\u7426\uff0c\u4eca\u5e74\u0032\u0034\u5c81\uff0c\u662f\u4e00\u540d\u524d\u7aef\u5de5\u7a0b\u5e08\u002c\u5bf9\u5927\u524d\u7aef\u548c\u7f16\u7a0b\u6280\u672f\u975e\u5e38\u70ed\u7231\uff0c\u76ee\u524d\u5728\u5b66\u6838\u5fc3\u6280\u672f\u65b9\u9762\u7684\u77e5\u8bc6\u3002\u76ee\u524d\u719f\u7ec3\u638c\u63e1\u0068\u0074\u006d\u006c\u002b\u0063\u0073\u0073\u002b\u004a\u0061\u0076\u0061\u0053\u0063\u0072\u0069\u0070\u0074\u524d\u7aef\u57fa\u7840\u77e5\u8bc6\uff0c\u719f\u7ec3\u4f7f\u7528\u0068\u0074\u006d\u006c\u0035\u002b\u0063\u0073\u0073\u0033\u7f16\u5199\u70ab\u9177\u9875\u9762\uff0c\u5bf9\u0041\u006a\u0061\u0078\u3001\u006e\u006f\u0064\u0065\u002e\u006a\u0073\u3001\u79fb\u52a8\u0077\u0065\u0062\u5f00\u53d1\u6709\u4e00\u5b9a\u7684\u4e86\u89e3\uff0c\u80fd\u591f\u719f\u7ec3\u8fd0\u7528\u6846\u67b6\u5b8c\u6210\u9875\u9762\uff0c\u5bf9\u0068\u0074\u0074\u0070\u3001\u0073\u0065\u006f\u7f51\u7edc\u57fa\u7840\u6709\u4e00\u5b9a\u6d89\u730e\uff0c\u60f3\u5728\u5e7f\u5dde\u627e\u4e00\u4efd\u524d\u7aef\u4e0e\u79fb\u52a8\u5f00\u53d1\u7684\u5de5\u4f5c\uff0c\u5bf9\u6211\u6709\u610f\u7684\u516c\u53f8\u548c\u730e\u5934\u53ef\u4ee5\u0051\u0051\u8054\u7cfb\u6211\u6216\u8005\u7ed9\u6211\u53d1\u90ae\u4ef6\uff0c\u0051\u0051\uff1a\u0038\u0032\u0030\u0039\u0036\u0035\u0033\u0033\u0039\uff0c\u0065\u006d\u0061\u0069\u006c\uff1a\u0068\u0075\u0071\u0069\u0032\u0038\u0038\u0040\u0067\u006d\u0061\u0069\u006c\u002e\u0063\u006f\u006d\uff0c\u8c22\u8c22\uff01\u000d\u000a\u0020\u0020\u0020\u0020');
        }

        function main() {

            (function () {
                'use strict';

                // jQuery to collapse the navbar on scroll
                $(window).scroll(function() {
                    if ($(".navbar").offset().top > 50) {
                        $(".navbar-fixed-top").addClass("top-nav-collapse");
                    } else {
                        $(".navbar-fixed-top").removeClass("top-nav-collapse");
                    }
                });

                // Testimonial Slider
                $('a.page-scroll').click(function() {
                    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top - 40
                            }, 900);
                            return false;
                        }
                    }
                });

                /*====================================
                 Show Menu on Book
                 ======================================*/
//                $(window).bind('scroll', function() {
//                    var navHeight = $(window).height() - 100;
//                    if ($(window).scrollTop() > navHeight) {
//                        $('.navbar-default').addClass('on');
//                    } else {
//                        $('.navbar-default').removeClass('on');
//                    }
//                });
//
//                $('body').scrollspy({
//                    target: '.navbar-default',
//                    offset: 80
//                })
//
//

                /*====================================
                 Portfolio Isotope Filter
                 ======================================*/


                // ****************************************************************
// counterUp
// ****************************************************************

//                $(document).ready(function( $ ) {
//                    if($("span.count").length > 0){
//                        $('span.count').counterUp({
//                            delay: 10, // the delay time in ms
//                            time: 1000 // the speed time in ms
//                        });
//                    }
//                });

                /*====================================
                 Pretty Photo
                 ======================================*/


            }());


        }
        main();
    </script>
</html>